<template>
	<view class="content">
		<view class="body">
			<view class="head">
				<view class="head_bg">
					<image src="../../static/patient_list/head-bg.png"></image>
				</view>
				<image src="../../static/patient_list/scan.png" class="scan" @tap="scan()"></image>
				<view class="search_box">
					<image src="../../static/patient_list/search.png" class="search_icon"></image>
					<input type="text" value="" placeholder="请输入患者姓名或编号" placeholder-class="searchInput" />
				</view>
				<view class="list-title">患者列表</view>
			</view>
			<scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll_list">
				<view class="content_item" v-for="(item) in patientList" :key="item.sid" >
					<view class="patient_headImg" @tap="toDetail(item.name,item.sex,item.sid,item.address,item.guardianName,item.guardianPhone)">
						<image src="../../static/patient_list/default-headImg.png"></image>
					</view>
					<view class="patient_info" @tap="toDetail(item.name,item.sex,item.sid,item.address,item.guardianName,item.guardianPhone)">
						<view class="patient_num">{{item.sid}}</view>
						<view class="patient_name">{{item.name}}</view>
					</view>
					<view class="operation">
						<view class="alarm">
							<view class="alarm_text" @click="handleShow(1,item.sid)" @touchmove.stop.prevent="bindTouchmove">报警</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<xy-dialog title="报警" content="确认要报警吗？" :sid= sid  :show="showDialog_1" @cancelButton="clickCancel(1)" @confirmButton="clickConfirm(1)"></xy-dialog>
		<xy-dialog title="异常" content="" :show="showDialog_2" @confirmButton="clickConfirm(2)">
			<view style="padding: 0 30upx 30upx;">
				<view>该患者出现异常情况</view>
				<view>请<span style="color: #007AFF;">联系上级管理员</span>解除异常</view>
			</view>
		</xy-dialog>
	</view>
</template>

<script>
	import xyDialog from '@/components/xy-dialog/xy-dialog.vue';
	export default {
		components: {
			xyDialog
		},
		data() {
			return {
				showDialog_1: false,
				showDialog_2: false,
				page: 1,
				patientList: [],
				sid:'',
				latitude:'',
				longitude:'',
				position:''
				
				
			};
		},
		created() {
			this.getPatientList();
			this.getPosition()
		},
		methods: {
			// 禁止穿透
			getPosition() {
				var _this = this;
				plus.geolocation.getCurrentPosition(
					function(position) {
						console.log('获取地点：' + JSON.stringify(position));
						_this.latitude = position.coords.latitude;
						_this.longitude = position.coords.longitude;
						_this.position = position.addresses;
						// _this.checkInAddress = position.addresses;
					},
					function(e) {
						console.log('Geolocation error: ' + e.message);
					}, {
						/* coordsType: 'bd09ll',
						provider:'baidu' */
					}
				);
			},
			loadMore(){
				console.log("loadMore");
			},
			getPatientList() {
				var json = new Object();
				json.page = this.page;
				json.limit = 10;
				this.$http.uniHttpPost(this.$api.api_patient_list.server_patient_list, json).then(res => {
					console.log("api_patient_list: " + JSON.stringify(res));
					this.patientList = res.data.data;
				}).catch(err => {
					console.log("err: " + JSON.stringify(err));
				})
			},
			toDetail(name, sex, sid, address, guardianName, guardianPhone) {
				let info = {
					name: name,
					sex: sex,
					sid: sid,
					address: address,
					guardianName: guardianName,
					guardianPhone: guardianPhone
				}
				uni.navigateTo({
					url: './base_info?info=' + JSON.stringify(info)
				})
			},
			scan() {
				uni.scanCode({
					success: res => {
						console.log('scanCode:' + JSON.stringify(res));
					}
				});
			},
			handleShow(type,sid) {
				console.log("type:" + type);
				console.log("sid:" + sid);
				this.sid = sid;

				this[`showDialog_${type}`] = true;
			},
			clickCancel(type) {
				this[`showDialog_${type}`] = false;
			},
			clickConfirm(type) {
				this[`showDialog_${type}`] = false;
				
				 var json = new Object();
				 json.patientSid = this.sid;
				 json.x = this.latitude.toString();
				 json.y = this.longitude.toString();
				 json.place = this.position;
				 this.$http.uniHttpPost(this.$api.create_warn, json).then(res => {
				 	console.log("res: " + JSON.stringify(res));
						 if(res.data.code == 0){
										  uni.showToast({
										 	icon: 'success',
										 	title: '报警成功！',
										 	duration: 3000
										 })
					}
				}).catch(err => {
				 	uni.hideLoading();
				 	console.log("err: " + JSON.stringify(err));
				 })
			
			},
			toOperate(sid) {
				uni.navigateTo({
					url: './operate?sid=' + sid
				});
			}
		}
	};
</script>

<style scoped>
	@import url('../../css/navigation.css');

	.content {
		font-size: 25upx;
		font-family: 'FZLTHJW';
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.body {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.head_bg {
		height: 416.66upx;
	}

	.head_bg image {
		width: 100%;
		height: 416.66upx;
		position: fixed;
		top: 0;
	}

	.scan {
		position: fixed;
		top: 100upx;
		right: 20.83upx;
		height: 28.47upx;
		width: 28.47upx;
	}

	.search_box {
		margin-top: 48.61upx;
		border-radius: 13.88upx;
		background-color: rgba(255, 255, 255, 0.522);
		width: 72%;
		height: 48.61upx;
		top: 86.8upx;
		position: fixed;
		left: 14%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search_icon {
		width: 31.94upx;
		height: 31.94upx;
	}

	.searchInput {
		color: rgba(0, 0, 0, 0.302);
	}

	.list-title {
		font-size: 29.16upx;
		line-height: 1.2;
		color: rgb(0, 0, 0);
		padding-left: 34.72upx;
		height: 68.05upx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid rgba(0, 0, 0, 0.3);
	}

	.scroll_list {
		flex: 1;
	}

	.content_item {
		display: flex;
		flex-direction: row;
		height: 113.88upx;
		align-items: center;
		border-bottom: 1px solid rgba(0, 0, 0, 0.3);
	}

	.patient_headImg {
		width: 152.08upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.patient_headImg image {
		width: 83upx;
		height: 83upx;
	}

	.patient_info {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.operation {
		width: 272.22upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: rgb(255, 255, 255);
	}

	.operate,
	.alarm {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.operate_text {
		background-color: rgb(55, 211, 203);
		width: 120upx;
		height: 55upx;
		border-radius: 16.31upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.alarm_text {
		width: 120upx;
		height: 55upx;
		border-radius: 16.31upx;
		background-color: red;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.patient_num {
		border-width: 0.69upx;
		border-color: rgb(64, 187, 186);
		border-style: solid;
		border-radius: 13.88upx;
		width: 110.41upx;
		height: 31.25upx;
		color: rgb(64, 187, 186);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.patient_name {
		font-size: 29.16upx;
		color: rgb(0, 0, 0);
	}
	.head{
		z-index: 999;
	}
</style>
